/* Theme created by Remi Grumeau http://www.remi-grumeau.com */
body {
    font-family: 	Prelude, Helvetica, Arial, Sans-serif;
    margin: 		0;
    color: 			#fff;
    background: 	#000;
}
body > *:not(.toolbar) {
	margin: 	0;
	padding:	30px 0 0 0;
	left:		0;
    top: 		0;
    z-index:	-1;
	-moz-border-radius: 15px;
	border-radius: 		15px;
	background:			#e4e4e2;
}


/************************************************************************************************/

.toolbar {
    height: 		45px;
    background: 	url(toolbar.png) repeat-x top center,
    				url(toolbarBorderLeft.png) no-repeat left 30px,
    				url(toolbarBorderRight.png) no-repeat right 30px;
}
.toolbar > h1 {
	position: 		absolute;
	left: 			50%;
	width: 			150px;
	margin: 		1px 0 0 -75px;
	padding: 		5px 0;
	height: 		auto;
	font-size: 		14px;
	color: 			#fff;
	font-weight: 	bold;
	text-align: 	center;
}

.button {
    position: 		absolute;
	top: 			2px;
	right:			2px;
	width:			auto;
	margin:			0;
	padding:		2px 10px 0 10px;
	color:			#FFFFFF;
	line-height:	23px;
	font-family:	inherit;
	font-size:		12px;
	font-weight:	bold;
	background: 	-webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#000));
	background:		-moz-linear-gradient(-90deg, #4d4d4d, #272727, #000, #111, #1f1f1f);
	-moz-border-radius: 5px;
	border-radius: 		5px;
}
.leftButton {
	right:	auto;	/* needed to avoid full width */
}
#backButton {
    left: 			6px;
    right: 			auto;
    max-width:		55px;
}
.blueButton {
	background: 	-webkit-gradient(linear, left top, left bottom, from(#8aafce), to(#000));
	background:		-moz-linear-gradient(-90deg, #8aafce, #000);
}


.whiteButton,
.redButton,
.grayButton {
    padding:			13px;
    color: 				inherit;
    text-align:			center;
    font-size: 			16px;
    border-width:		0 12px;
    text-decoration:	inherit;
}
.whiteButton {
    -webkit-border-image: 	url(whiteButton.png) 0 12 0 12;
    -moz-border-image: 		url(whiteButton.png) 0 12 0 12;
	color: 		#4f4f4f;
}
.grayButton {
    -webkit-border-image: 	url(grayButton.png) 0 12 0 12;
    -moz-border-image: 		url(grayButton.png) 0 12 0 12;
    color: 		#fff;
}
.redButton {
    -webkit-border-image: 	url(redButton.png) 0 12 0 12;
    -moz-border-image: 		url(redButton.png) 0 12 0 12;
    color: 		#fff;
}
.grayButton[selected], 
.grayButton:active {
    color:			rgba(255,255,255,.6);
}
.toolbar > .redButton {
	padding:		2px 10px 0 10px;
    font-size: 		12px;
    font-weight: 	bold;
    border-width:	0;
	background: 	-webkit-gradient(linear, left top, left bottom, from(#f12824), to(#d2020a));
	background:		-moz-linear-gradient(-90deg, #f12824 0%, #d2020a 100%);
    -webkit-border-image:	0;
    -moz-border-image:		0;
}
.redButton[selected],
.redButton:active,
.whiteButton[selected], 
.whiteButton:active {
	color:			#fff;
}

/************************************************************************************************/

body > ul > li {
    margin: 		0;
    border-bottom:	1px solid #bfbfbd;
    border-top:		1px solid #f2f2f1;
    padding:		14px 0 14px 15px;
	color:			#555555;
	font-weight:	normal;
	font-size:		16px;
    list-style-type:none;
}
body > ul > li:first-child {
    border-top:	0;
}
body > ul > li:last-child {
    border-bottom:	0;
}
body > ul > li.group 
{
    color:			#fff;
	font-weight:	bold;
	font-size:		14px;
	text-shadow:	rgba(0,0,0,.6) 0 1px 2px;
	padding:		4px 10px 3px 10px;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#85adcf),
							color-stop(.2, #94c1e6),
    					to(#94c1e6)
       				);
    background:		-moz-linear-gradient(270deg, #85adcf 0%, #94c1e6 20%, #94c1e6 100%);
    border:			0px;
}

body > ul > li > a 
{
	color:			inherit;
    margin:			-14px 0 -14px -15px;
    padding:		14px 0 14px 15px;
    background: 	url(listArrow.png) no-repeat right center;
    text-decoration:	none;

}
ul > li > a[selected], 
ul > li > a:active,
.panel > ul > li > a[selected], 
.panel > ul > li > a:active {
    color: 		#fff;
    background-color:		#4a9fe0;
    background-repeat:		no-repeat, repeat-x;
    background-position:	right center, left top;
    background-image: 		url(listArrowSel.png), url(selection.png);
}

ul > li > a[selected="progress"] {
    background-image: url(loading.gif), url(selection.png);
}


body > ul > li > a[target="_replace"] {
    padding-top: 	25px;
    padding-bottom: 25px;
    font-size: 		18px;
    color: 			#5099d8;
    background-image: none;
}

/************************************************************************************************/

body > .dialog,
body[orient="landscape"] > .dialog {
	top:		0px;
    z-index: 	2;
    background: rgba(0, 0, 0, .8);
    padding: 	0;
}
body > .dialog > div.toolbar {
	float:		left;
	width:		100%;
}

body > .dialog > fieldset {
	width:			95%;
    margin: 		10px auto;
    border: 		none;
    padding: 		10px 0 0 0;
    border:			1px solid #000;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#656565), 
    						color-stop(.2, #121212), 
    						color-stop(.8, #1f1f1f), 
    					to(#373737)
    				);
    background:		-moz-linear-gradient(270deg, 
    					#656565 0%, 
    					#121212 20%, 
    					#1f1f1f 80%, 
    					#373737 100%
    				);
    -moz-border-radius:	10px;
    border-radius:		10px;
}

body > .dialog > fieldset > div.row {
    padding: 			0 10px;
    border:				0px;
    background-color:	transparent;
    -webkit-border-radius:	0;
}
body > .dialog > fieldset > div.row > label {
    position: 		absolute;
	margin:			0;
	padding:		10px 8px 10px 12px;
	font-weight:	normal;
	line-height: 	1em;
    font-size:		12px;
    color: 			#b5b5b5;
}
body > .dialog > fieldset > div.row > input:not([type|=radio]):not([type|=checkbox]) {
    font-size:		12px;
	padding:		8px 0 6px 60px;
	border:			1px solid #000;
	-moz-border-radius:	0px;
	border-radius:		0px;
	color:			#fff;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#282828), color-stop(.1, #575757), color-stop(.9, #737372), to(#27292b));
    background:		-moz-linear-gradient(270deg, 
    					#282828 0%, #575757 10%, #737372 90%, #27292b 100%);
}


/************************************************************************************************/

body > .panel {
	padding-left: 	10px;
	padding-right: 	10px;
    background: #e4e4e2;
}
body > .panel > h2:first-child {
	margin-top:		0px;
}
body > .panel > h2 {
    margin: 		-10px;
    margin-bottom:	0px;
    padding:		14px 20px;
    font-size: 		inherit;
    font-weight:	normal;
    color: 			#525251;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#babab8), 
    						color-stop(.05, #9d9d9b), 
    						color-stop(.5, #cdcdcb), 
    						color-stop(.8, #cdcdcb), 
    					to(#bdbdbb)
    				);
    background:		-moz-linear-gradient(270deg, 
    					#babab8 0%, #9d9d9b 5%, #cdcdcb 50%, #bdbdbb 100%);
	-moz-border-radius-topleft:		15px;
	-moz-border-radius-topright: 	15px;
	border-top-left-radius: 		15px;
	border-top-right-radius: 		15px;
}

body > .panel > ul > li {
	list-style:		none;
	padding:		12px;
}

fieldset > .row {
	color:			#000;
    border-bottom:	1px solid #bfbfbd;
    border-top:		1px solid #f2f2f1;
    min-height: 	42px;
}
fieldset > .row > p {
	width:			auto;
	height:			auto;
	padding:		12px;
	margin:			0;
	text-align:		left;
}

/************************************************************************************************/

body > .panel > ul,
body > .panel > fieldset {
    margin: 		10px 0;
    padding: 		0;
    border: 		2px solid #9f9f9e;
    font-size: 		16px;
    border-radius: 		10px;
    -moz-border-radius: 10px;
	margin-bottom:	25px;
    background:		#e4e4e2;
}
body > .panel > ul > li {
	color:			#555555;
}
body > .panel > ul > li,
fieldset > .row  {
    border-bottom: 	1px solid #999999;
    -webkit-border-radius:	0;
    -moz-border-radius: 	0;
}
body > .panel > ul > li:first-child > a,
body > .panel > ul > li:first-child,
fieldset > .row:first-child {
    -webkit-border-top-left-radius: 	8px;
    -webkit-border-top-right-radius: 	8px;
    -moz-border-radius-topleft: 		8px;
    -moz-border-radius-topright: 		8px;
    border-top-left-radius: 			8px;
    border-top-right-radius: 			8px;
}
body > .panel > ul > li:last-child > a,
body > .panel > ul > li:last-child,
fieldset > .row:last-child {
    -webkit-border-bottom-left-radius: 	8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomleft: 		8px;
    -moz-border-radius-bottomright: 	8px;
    border-bottom-left-radius: 			8px;
    border-bottom-right-radius: 		8px;
    border-bottom:	0;
}
body > .panel > ul > li > a {
	display:		block;
    margin:			-12px;
    padding:		12px;
    color: 			inherit;
    background: 	url(listArrow.png) no-repeat right center;
    text-decoration:	none;
}
body > .panel > ul > li > a[selected],
body > .panel > ul > li > a:active {
	color:			#fff;
}

/************************************************************************************************/

fieldset > .row > input,
fieldset > .row > textarea,
fieldset > .row > select {
    width:				100%;
    margin: 			0;
    height: 			inherit;
	font-size:			.8em;
	background:			transparent;
	-webkit-appearance: none;
	-moz-appearance:	button;
}
fieldset > .row > textarea,
fieldset > .row > input:not([type|=radio]):not([type|=checkbox]) {
    padding: 		10px 10px 14px 110px;
	border:			0;
	margin-bottom:	-4px;
	resize: 		none;
	color:			#000;
}
fieldset > .row > select {
	float:			right;
	width:			auto;
	height:			42px;
	color:			#000;
	font-size:		.8em;
	padding-right:	10px;
	border:			0;
}
fieldset > .row > input[type|=radio], 
fieldset > .row > input[type|=checkbox] {
	float:			right;
	padding:		0;
	margin:			7px 7px 0 0;
	height:			25px;
	width:			25px;
	-webkit-appearance: 	radio;
	-moz-appearance: 		radio;
	-moz-border-radius: 	1em;
	border-radius: 			1em;
}
fieldset > .row > input[type|=checkbox] {
	-moz-border-radius: 	.5em;
	border-radius: 			.5em;
	-webkit-appearance: 	checkbox;
	-moz-appearance: 		checkbox;
}

fieldset > .row > label {
    margin:			0 0 0 14px;
    line-height: 	42px;
    font-size:		14px;
    color:			#358cd6;
}
fieldset > .row > span {
    padding: 		12px 10px 0 110px;
    margin: 		0;
}




fieldset > .row > .toggle {
    top: 			6px;
    right: 			6px;
    width: 			80px;
    height: 		28px;
    border: 		1px solid #000;
    font-size: 		16px;
    font-weight:	bold;
    line-height:	25px;
	-moz-border-radius: 15px;
    border-radius:		15px;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#878787), color-stop(.3, #9b9b9b), color-stop(.5, #b1b1b1), color-stop(.95, #b1b1b1), to(#4b4a4a));
    background:		-moz-linear-gradient(270deg, 
    					#878787 0%, #9b9b9b 30%, #b1b1b1 50%, #b1b1b1 95%, #414141 100%);
}
fieldset > .row > .toggle[toggled="true"] {
    border: 	1px solid #000;
}
fieldset > .row > .toggle > .toggleOn {
    top: 			0;
    left: 			-60px;
    width: 			50px;
    color: 			#fff;
    text-align: 	left;
    padding:		3px 0 1px 15px;
}
fieldset > .row > .toggle[toggled="true"] > .toggleOn {
    left: 			0px;
}

fieldset > .row > .toggle > .toggleOff {
    width: 			47px;
    text-align: 	right;
    left: 			20px;
    top: 			0;
    color: 			#fff;
    padding:		3px 13px 1px 0;
}
fieldset > .row > .toggle[toggled="true"] > .toggleOff {
    left: 			80px;
}

fieldset > .row > .toggle > .thumb {
    left: 			0px;
    width: 			28px;
    height: 		28px;    
	z-index:		10;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#eaeaea), color-stop(.5, #acacac), color-stop(.5, #9d9d9d), to(#868686));
    background:		-moz-linear-gradient(270deg, 
    					#eaeaea 0%, #acacac 50%, #9d9d9d 50%, #868686 100%);
    -moz-border-radius:		15px;
    border-radius: 			15px;
	-webkit-box-shadow:		rgba(0,0,0,.6) 0 0 5px;
	-moz-box-shadow:		rgba(0,0,0,.6) 0 0 5px;
}
fieldset > .row > .toggle[toggled="true"] > .thumb {
    left: 			52px;
    background:		-webkit-gradient(linear, left top, left bottom, 
    					from(#bbd5ec), color-stop(.5, #80bff4), color-stop(.5, #80bff4), to(#84b7e6));
    background:		-moz-linear-gradient(270deg, 
    					#bbd5ec 0%, #80bff4 50%, #80bff4 50%, #84b7e6 100%);
}

fieldset > .row > .toggle > .toggleOn,
fieldset > .row > .toggle > .toggleOff,
fieldset > .row > .toggle > .thumb {
	-webkit-transition-timing-function:	linear;
	-moz-transition-timing-function:	linear;
	-webkit-transition-duration:	150ms;
	-moz-transition-duration:		150ms;
	-webkit-transition-property:	left;
	-moz-transition-property:		left;
}

/************************************************************************************************/
#preloader {
    display: none;
    background-image: 	url(loading.gif), 
    					url(listArrow.png), 
    					url(listArrowSel.png),  
    					url(whiteButton.png),  
    					url(grayButton.png), 
    					url(redButton.png);
}


.backButtonImg {
  width: 50px;
  background: url(back-img.png) no-repeat center left,
              url(backButtonBack.png) repeat-x top left !important;
  color: rgba(0,0,0,0);
}
